<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { clearUserInfo } from "@/state/user";
import MaterialDialog from "@/components/MaterialDialog.vue";
import "@material/web/button/text-button";

const props = defineProps(["open"]);
const emit = defineEmits(["close"]);

const logoutDialog = ref(null);

async function onSubmit() {
  if (logoutDialog.value.dialog.returnValue != "logout") {
    return;
  }
  logoutDialog.value.dialog.returnValue = null;
  logout();
}

const router = useRouter();

function logout() {
  clearUserInfo();
  router.push({
    name: "login"
  });
}
</script>

<template>
  <MaterialDialog ref="logoutDialog" :open="open" @close="onSubmit(); $emit('close')">
    <template #headline>
      注销登录
    </template>

    <template #content>
      <form id="delete-user-dialog" method="dialog">
        <p>确认注销登录吗？</p>
      </form>
    </template>

    <template #actions>
      <md-text-button type="submit" value="cancel" form="delete-user-dialog" autofocus>取消</md-text-button>
      <md-text-button type="submit" value="logout" form="delete-user-dialog">注销</md-text-button>
    </template>
  </MaterialDialog>
</template>